<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

function backHome(){
  router.push({path:"/"});
}
</script>

<template>
  <div class="errorBody">
    <div id="error">404</div>
    <h1>未找到相关页面</h1>
    <p>抱歉，您访问的页面可能不存在或者被删除！</p>
      <Button type="primary" @click="backHome">返回首页</Button>
  </div>

</template>

<style scoped>
/* 全局样式 */
.errorBody {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

h1 {
  color: #333;
}

p {
  color: #666;
}

/* 404 元素样式 */
#error {
  font-size: 100px;
  color: #ccc;
}

/* 按钮样式 */
a {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 20px;
  transition: background-color 0.3s ease;
  text-decoration: none;
}
</style>